<script setup>

import Header from '@/components/Header.vue';
import Menu from '@/components/menu/Menu.vue';
import Footer from '@/components/Footer.vue';
</script>

<template>
  <div class="common-layout"> 
    <el-container>
      <el-aside  class="menuas" width="200px">
        <el-scrollbar height="100vh"><Menu /></el-scrollbar></el-aside>
      <el-container>
        <el-header>
          <Header />
          </el-header>
        <el-main> <router-view></router-view></el-main>
        <el-footer><Footer /></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<style>

.menuas {
  background-color: #2f3c4d;
  height: 100vh;

}
.el-header {
  position: relative;
  background-color: var(--el-color-primary-light-3);
  color: var(--el-text-color-primary);
  height: 7vh;
}
.el-footer {
  position: relative;
  background-color: var(--el-color-primary-light-8);
  color: var(--el-text-color-Blank);
  height: 10%;
 
}
.el-aside {
  width: 25vh;
  height: 100vh;
  color: var(--el-text-color-primary);
  background-color: var(#ffd04b);
}
.el-menu {
  border-right: none;
 
}
.menuHeader{

  background-color: #2f3c4d;
 
}
.menuHeaderText{
  color: #fcfcfc;

  font-size: 2vh;
}
.el-main {
  padding: 0;
}
.toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>